<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
</head>
<body>

<!--网页header-->
<!--<div th:replace="~{common::myheader}"></div>-->
<div class="container">
    <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom" th:fragment="myheader">
        <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
            <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
        </a>

        <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
            <li><a href="/" class="nav-link px-2 link-secondary">index</a></li>
            <li><a href="/list" class="nav-link px-2 link-dark">list</a></li>
            <li><a href="/demo" class="nav-link px-2 link-dark">demo</a></li>
            <li><a href="/list" class="nav-link px-2 link-dark">none</a></li>
            <li><a href="/list" class="nav-link px-2 link-dark">none</a></li>
        </ul>

        <div class="col-md-3 text-end">
            <button type="button" class="btn btn-outline-primary me-2">Login</button>
            <button type="button" class="btn btn-primary">Sign-up</button>
        </div>
    </header>
</div>



<table class="table">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
<!--        <th scope="col">stat</th>-->
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script>
    let xhr=new XMLHttpRequest();//用来发请求的
    xhr.open("GET","http://localhost:8080/list1")//打开链接发送请求
    xhr.onreadystatechange=function (){
        if(xhr.readyState===4){
            if(xhr.status===200){
                console.log("成功")
                console.log(xhr.responseText);

                let parse = JSON.parse(xhr.responseText);
                console.log(parse)
                let tBody = document.querySelector("tbody");
                let newTr1=document.createElement("tr");
                let newTr2=document.createElement("tr");
                let newTr3=document.createElement("tr");

                let td1_1=document.createElement("td")
                let td1_2=document.createElement("td")
                let td2_1=document.createElement("td")
                let td2_2=document.createElement("td")
                let td3_1=document.createElement("td")
                let td3_2=document.createElement("td")

                td1_1.textContent=parse[0].id
                td1_2.textContent=parse[0].name
                td2_1.textContent=parse[1].id
                td2_2.textContent=parse[1].name
                td3_1.textContent=parse[2].id
                td3_2.textContent=parse[2].name

                newTr1.appendChild(td1_1);
                newTr1.appendChild(td1_2);
                newTr2.appendChild(td2_1);
                newTr2.appendChild(td2_2);
                newTr3.appendChild(td3_1);
                newTr3.appendChild(td3_2);

                tBody.appendChild(newTr1);
                tBody.appendChild(newTr2);
                tBody.appendChild(newTr3);
            }else{
                console.log("出错了");
            }
        }
    }
        xhr.send();


    // 错误处理增强
    window.addEventListener('error', function(e) {
        console.error('全局错误:', e.message);
    });
</script>
</body>
</html>